<template>
  <div>
    <div class="el-card operate-container is-never-shadow">
      <div class="el-card__body">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <button class="btn-add el-button--default el-button--mini btn_right">添加</button>
      </div>
    </div>
    <div style="margin-top: 20px">
      <template>
        <el-table :data="GoodsBranch" border style="width: 100%">
          <el-table-column prop="id" label="编号" align="center"> </el-table-column>
          <el-table-column prop="name" label="分类名称" align="center"> </el-table-column>
          <el-table-column prop="level" label="级别" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.level == 0">一级 </span>
              <span v-if="scope.row.level == 1"> 二级</span>
            </template>
          </el-table-column>
          <el-table-column prop="productCount" label="商品数量" align="center"> </el-table-column>
          <el-table-column prop="productUnit" label="数量单位" align="center"> </el-table-column>
          <el-table-column prop="address" label="导航栏" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.value"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="是否显示" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.value1"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center"> </el-table-column>
          <el-table-column prop="address" label="设置" align="center" width="200px">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.level == 0">
                  <el-button size="mini" @click="sub(scope.row.id)">查看下级</el-button>
                </span>
                <span v-if="scope.row.level == 1">
                  <button size="mini" disabled>查看下级</button>
                </span>
                <el-button size="mini">转移商品</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" @click="productCateEdit(scope.row.id)">编辑</el-button>
                <el-button type="danger" size="mini" @click="removeClass(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import { fetchCommodityClassification } from '@/api/api'
export default {
  data() {
    return {
      value1: true,
      ids: 0,
      GoodsBranch: [],
      tableData: [],
    }
  },
  methods: {
    sub(id) {
      this.ids = id
      fetchCommodityClassification(this.ids).then((res) => {
        this.GoodsBranch = res.data.list
        console.log(this.GoodsBranch)
      })
    },
    removeClass(id) {
      this.GoodsBranch = this.GoodsBranch.filter((item) => {
        return item.id !== id
      })
    },
    productCateEdit(id) {
      this.$router.push({ path: '/pms/updateProductCate', query: { id } })
    },
  },
  created() {
    fetchCommodityClassification(this.ids).then((res) => {
      this.GoodsBranch = res.data.list
      console.log(this.GoodsBranch)
    })
  },
}
</script>

<style lang="scss">
.el-card__body {
  border: 1px solid #ebeef5;
}
.btn-add {
  border: 1px solid #dcdfe6;
  background: #fff;
}
.btn_right {
  float: right;
}
.el-button--mini,
.el-button--small {
  font-size: 12px;
  border-radius: 3px;
}
</style>
